<template>
  <div>
    <el-dialog
      @close="handleClose(false)"
      @open="handleOpen"
      close-on-press-escape
      v-dialogDrag
      title="添加设备组元素"
      :close-on-click-modal="false"
      :lock-scroll="false"
      :visible.sync="showDialog"
    >
      <el-tabs
        v-model="activeName"
        :tab-position="tabPosition"
        class="tabHight"
      >
        <el-tab-pane name="first" label="详情">
          <el-form
            :model="deviceGroupEleForm"
            :rules="deviceGroupRules"
            ref="deviceGroupEleForm"
            size="mini"
            label-width="80px"
            class="tabHight_auto"
          >
            <el-form-item label="元素类型:">
              <el-select
                v-model="deviceGroupELementType"
                placeholder="元素类型"
                size="mini"
                class="w100"
                readonly
              >
                <el-option
                  v-for="item in deviceTypeList"
                  :key="item.eleValue"
                  :label="item.eleText"
                  :value="item.eleValue"
                >
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item
              label="设备:"
              prop="deviceToken"
              v-if="deviceGroupELementType === 'device'"
            >
              <el-select
                v-model="deviceGroupEleForm.deviceToken"
                placeholder="设备"
                size="mini"
                class="w100"
              >
                <el-option
                  v-for="item in deviceList"
                  :key="item.token"
                  :label="item.comments"
                  :value="item.token"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="嵌套组:"
              prop="nestedGroupToken"
              v-if="deviceGroupELementType === 'group'"
            >
              <el-select
                v-model="deviceGroupEleForm.nestedGroupToken"
                placeholder="设备组"
                size="mini"
                class="w100"
              >
                <el-option
                  v-for="item in deviceGroupList"
                  :key="item.token"
                  :label="item.name"
                  :value="item.token"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <!-- <el-tab-pane name="second" label="角色">
          <el-form size="mini" label-width="15%">
            <el-form-item>
              <el-input
                v-model="newRoles"
                placeholder="请输入角色"
                style="width: 65%; float: left; margin-top: 1px"
              ></el-input>
              <el-button
                class="addbutton"
                size="mini"
                @click.prevent.stop="onRolesAdded()"
                ><i class="el-icon-plus"></i>添加</el-button
              >
            </el-form-item>
            <el-form-item>
              <div
                class="div-role"
                v-if="editedRoles.length > 0"
                style="width: 79%"
              >
                <div class="div-inline" v-for="role in editedRoles" :key="role">
                  {{ role
                  }}<span
                    class="el-icon-close"
                    style="margin-left: 6px; cursor: pointer"
                    @click.prevent.stop="onRoleDeleted(role)"
                  />
                </div>
              </div>
            </el-form-item>
          </el-form>
        </el-tab-pane> -->
      </el-tabs>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="handleClose(false)">取 消</el-button>
        <el-button
          size="mini"
          type="primary"
          :loading="btnLoading"
          @click="submitForm('deviceGroupEleForm')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
// var axios = require('axios');
import {
  getDeviceGroupLists,
  addDevicegroupsElements,
} from "@/api/deviceGroup";
import { getDeviceLists } from "@/api/device";
export default {
  props: {
    showDeviceGroupEleAdd: {
      type: Boolean,
      default: false,
    },
    deviceGroupToken: {
      type: String,
      default: "",
    },
  },
  components: {},
  data() {
    return {
      btnLoading: false,
      activeName: "first",
      deviceGroupELementType: "device",
      deviceGroupList: [],
      deviceList: [],
      showDialog: false,
      tabPosition: "left",
      deviceTypeList: [
        { eleText: "设备", eleValue: "device" },
        { eleText: "嵌套", eleValue: "group" },
      ],
      deviceGroupEleForm: {
        deviceToken: "",
        nestedGroupToken: "",
        roles: [],
      },
      deviceGroupRules: {
        deviceToken: [{ required: true, message: "请择设备", trigger: "blur" }],
        nestedGroupToken: [
          { required: true, message: "请选择设备组名称", trigger: "blur" },
        ],
      },
      newRoles: "",
      editedRoles: [],
    };
  },
  mounted() {
    this.getDeviceList();
    this.getDeviceGroupList();
  },
  watch: {
    showDeviceGroupEleAdd(newValue, oldValue) {
      this.showDialog = newValue;
      this.activeName = "first";
    },
  },
  methods: {
    //弹窗打开执行操作
    handleOpen() {},
    // 弹窗关闭执行操作
    handleClose(isRefresh) {
      this.$emit("closeEleDialog", isRefresh);
      if (!isRefresh) {
        this.cancelEmpty();
      }
    },
    handleSuccess(isRefresh) {
      this.$emit("closeEleDialog", isRefresh);
    },
    //取消清空数据
    cancelEmpty() {
      this.showDialog = false;
      this.deviceGroupEleForm = {
        deviceToken: "",
        nestedGroupToken: "",
        roles: [],
      };
      this.editedRoles = [];
    },
    // 提交
    submitForm(formName) {
      let that = this;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let formData = {};
          formData = Object.assign({}, this.deviceGroupEleForm);
          if (this.deviceGroupELementType == "device") {
            delete formData.nestedGroupToken;
          }
          if (this.deviceGroupELementType == "group") {
            delete formData.deviceToken;
          }
          formData.roles = this.editedRoles;
          // let param = "[" + JSON.stringify(formData) + "]";
          let param = [formData];
          this.btnLoading = true;
          addDevicegroupsElements(param, this.deviceGroupToken)
            .then((res) => {
              this.$msg({
                message: "操作成功!",
                type: "success",
              });
              this.showDialog = false;
              this.handleSuccess(true);
            })
            .finally((f) => {
              this.btnLoading = false;
            });
        } else {
          return false;
        }
      });
    },
    onRolesAdded() {
      if (this.newRoles == "") {
        return;
      }
      let roles = this.newRoles.split(" ");
      roles.forEach((role) => {
        if (this.editedRoles.indexOf(role) === -1) {
          this.editedRoles.push(role);
        }
      });
      this.newRoles = "";
    },
    onRoleDeleted(role) {
      let roles = this.editedRoles;
      let index = roles.indexOf(role);
      if (index !== -1) {
        roles.splice(index, 1);
      }
    },
    getDeviceGroupList() {
      let params = {
        page: 1,
        pageSize: 0,
      };
      getDeviceGroupLists(params).then((res) => {
        this.deviceGroupList = res.data.results;
      });
    },
    getDeviceList() {
      var params = {
        includeDeviceType: true,
        includeAssignment: true,
        excludeAssigned: false,
        page: 1,
        pageSize: 0,
        startDate: "",
        endDate: "",
      };
      getDeviceLists(params).then((res) => {
        this.deviceList = res.data.results;
      });
    },
  },
};
</script>

<style lang='scss' scoped>
.addbutton {
  background-color: #2680d2;
  color: #ffffff;
  margin-left: 10px;
}
.el-icon-plus {
  color: #ffffff;
}
.div-role {
  width: 75%;
  background: rgba(233, 233, 233, 0.3);
  min-height: 42px;
  padding: 0 0 5px 5px;
  display: flex;
  flex-wrap: wrap;
}
.div-inline {
  // display: inline;
  // background-color: #e4e4e4;
  // padding: 2px;
  // border: 1px #5a5e66 solid;
  // line-height: 30px;
  // white-space: nowrap;
  // word-wrap: break-word;
  display: inline;
  background-color: #e4e4e4;
  padding: 2px;
  line-height: 25px;
  margin: 5px 5px 0 0;
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  word-wrap: break-word;
}
.image-size {
  width: 150px;
  height: 105px;
}
</style>
